<template>
<div class="div1">
<!--  1.导航页-->
  <div>
    <van-nav-bar
        title="会员福利"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />
  </div>
<!--    2.卡片层-->
    <div class="div2">
<!--      2.1白金会员-->
      <div>
        <van-row gutter="20">
          <van-col span="8" class="div21">猫猫会员</van-col>
          <van-col span="6"></van-col>
          <van-col span="8">
            <van-image
                round
                width="5rem"
                height="5rem"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </van-col>
        </van-row>
      </div>
<!--      2.2价钱-->
      <div class="div22">
        <label style="font-size: 30px">￥2600</label>
        <label style="font-size: 20px;color: #8d8c8c;text-decoration:line-through">/3200</label>
      </div>
    </div>
<!--    3.服务-->
    <div class="div3">
<!--      3.1-->
      <van-row gutter="20" class="div31">
        <van-col span="8">
          <van-image
              round
              width="5rem"
              height="5rem"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />

        </van-col>
        <van-col span="15">
          <div style="margin-left: 10px;margin-top: 20px;font-size: 20px">
            海量礼物等你来选！</div>
          <div style="margin-left: 10px;font-size: 15px;color: darkgray">快来开通，你值得拥有。</div>
        </van-col>
      </van-row>
      <!--      3.2-->
      <van-row gutter="20" class="div31">
        <van-col span="8">
          <van-image
              round
              width="5rem"
              height="5rem"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />

        </van-col>
        <van-col span="15">
          <div style="margin-left: 10px;margin-top: 20px;font-size: 20px">
            海量积分等你拥有！</div>
          <div style="margin-left: 10px;font-size: 15px;color: darkgray">快来开通，你值得拥有。</div>
        </van-col>
      </van-row>
      <!--      3.3-->
      <van-row gutter="20" class="div31">
        <van-col span="8">
          <van-image
              round
              width="5rem"
              height="5rem"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />

        </van-col>
        <van-col span="15">
          <div style="margin-left: 10px;margin-top: 20px;font-size: 20px">
            尊享服务30天！</div>
          <div style="margin-left: 10px;font-size: 15px;color: darkgray">快来开通，你值得拥有。</div>
        </van-col>
      </van-row>
    </div>
<!--  4.升级服务-->
  <div class="div4">
    <van-row gutter="20" class="div41">
      <van-col span="6"></van-col>
      <van-col span="8" @click="add()">升级服务</van-col>
      <van-col span="8"></van-col>
    </van-row>

  </div>
</div>
</template>

<script>
export default {
  name: "VipView",
  data() {
    return{
    }
  },methods:{
    back(){
      history.back();
    },
    add(){
      this.axios.get("/api/payvip/createpay.do").then(r=>{
        if(r.data.code=200){
          //创建支付成功
          document.write(r.data.data);
        }
      })
    },
  }
}
</script>

<style scoped>
.div1{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../assets/images/vip-02.png");
}
.div2{
  border-radius: 10px;
  margin-top: 50px;
  margin-left: 65px;
  width: 70%;
  height: 180px;
  background: url("https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg");
}
.div21{
  margin-top: 30px;
  margin-left: 15px;
}
.div22{
  margin-top: 40px;
  float: left;
  margin-left: 10px;
}
.div3{
  margin-top: 60px;
  margin-left: 20px;
}
.div31{
  margin-top: 40px;
}
.div4{
  border-radius: 15px;
  margin-top: 100px;
  margin-left: 60px;
  width: 70%;
  height: 60px;
  background: url("../assets/images/vip-01.png");
}
.div41{
  position: absolute;
  width: 80%;
  margin-top: 18px;
  font-size: 20px;
  color: gold;
}
</style>